<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="config.js"></script>
  <script src="jquery-3.3.1.min.js"></script>
  <script src="jquery.lazyload.min.js"></script>
  <style>
    #myDiv {
      height: 800px;
    }

    #myDiv .img {
      display: inline-block;
      width: 100px;
      margin: 2px;
      padding: 0 0 5px 0px;
    }

    #myDiv .img img {
      cursor: pointer;
    }

    #myDiv .img div {
      height: 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-left: 5px;
    }

    #myDiv .img.gtfive {
      background-color: rgba(0, 0, 255, 0.4);
    }

    #control {
      padding: 40px 0;
      text-align: center;
    }

    #control input[type="button"] {
      margin: 0 30px;
    }
  </style>
  <script>

    $(function () {
      var serverIP = caijingdaxueip;            //要访问的Ip
      var page = 0;                             //页码
      var pagesize = 72;                        //每页条数
      $.get(serverIP + "/cardAll?page=" + page + "&pagesize=" + pagesize, function (data) {
        loadJSON(JSON.parse(data));
      })
      //人像详情点击事件
      $("body").on("click", ".caijingrenxiang", function () {
        window.open("caijingcard.html?id=" + $(this).data("id"))
      })
      //上一页点击事件
      $("#control .pre").click(function () {
        if (page == -1) { return alert("已是第一页"); }
        page--;
        $.get(serverIP + "/cardAll?page=" + page + "&pagesize=" + pagesize, function (data) {
          $("#myDiv").empty();
          var arcs = JSON.parse(data);
          loadJSON(arcs)
        })
      })
      //下一页点击事件
      $("#control .next").click(function () {
        page++
        $.get(serverIP + "/cardAll?page=" + page + "&pagesize=" + pagesize, function (data) {
          console.log(data);
          if (data == '[]') {
            alert("最后一页")
            page--
          } else {
            $("#myDiv").empty();
            var arcs = JSON.parse(data);
            loadJSON(arcs)
          }
        }
        )
      })
      //生成结果
      function loadJSON(arcs) {
        for (var i = 0; i < arcs.length; i++) {
          var $html = $(" <div class='img'>\
                    <img class = 'caijingrenxiang' height='100' width='100' data-id = '" + arcs[i]["id"] + "' data-original='" + arcs[i]["url"] + "'> \
                    <div class='name'></div>\
                    <div class='personId'></div>\
                    <div class='number'>id:"+ arcs[i]["id"] + "</div>\
                    \<div class='number'>数量:"+ arcs[i]["card_len"] + "</div>\
                    \<div class='number'>acvslen:"+ arcs[i]["acvslen"] + "</div>\
                    <div class='dayCount'></div>\
                    </div>")
          arcs[i].name && $html.find(".name").html(arcs[i]["name"]).attr("title", "姓名：" + arcs[i]["name"])
          arcs[i].person_id && $html.find(".personId").html(arcs[i]["person_id"]).attr("title", "id：" + arcs[i]["person_id"])
          $("#myDiv").append($html)
        }
        $("img").lazyload();
      }
    })
  </script>
</head>

<body>
  <div id="myDiv"></div>
  <div id="control">
    <input type="button" class="pre" value="上一页">
    <input type="button" class="next" value="下一页">
  </div>
</body>

</html>